<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="counter">
        Counter: {{ counter }}
    </div>
    <div id="bind-attribute">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="event-handling">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转 Message</button>
    </div>

    <div id="two-way-binding">
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>

    <div id="conditional-rendering">
        <span v-if="seen">现在你看到我了</span>
    </div>

    <script>
        const Counter = {
            data() {
                return {
                    counter: 88
                }
            },
            mounted() {
                setInterval(() => {
                    this.counter++
                }, 1000)
            }
        }
        Vue.createApp(Counter).mount('#counter')

        const AttributeBinding = {
            data() {
                return {
                    message: 'You loaded this page on ' + new Date().toLocaleString()
                }
            }
        }

        Vue.createApp(AttributeBinding).mount('#bind-attribute')

        const EventHanding = {
            data() {
                return {
                    message: 'hello vue.js!'
                }
            },
            methods: {
                reverseMessage() {
                    this.message = this.message
                        .split('')
                        .reverse()
                        .join('')
                }
            }
        }

        Vue.createApp(EventHanding).mount('#event-handling');


        const TwoWayBinding = {
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }

        Vue.createApp(TwoWayBinding).mount('#two-way-binding')

        const ConditionalRendering = {
            data() {
                return {
                    seen: true
                }
            }
        }

        Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
    </script>


</body>

</html>